<template>
    <div class="main">
		<h3>注册</h3>
		<div class="phones" @click="getphone">
			<img class="phone-icon" :src="phone" alt="">
			<div class="phone-input">
				<span :class="['phone-Prefix','input-span-color-0']">+ 86 </span>
				<input type="tel" ref="phonen" class="phone-dep" v-model="phoneNum"/>
			</div>
		</div>

		<div class="pwd" @click="getpwd">
			<img class="phone-icon-2" :src="board" alt="">
			<div class="phone-input">
				<input ref="pwd" type="password" style="width: 100px;" v-model="validata"/>
				<van-button type="default" size="small" class="valibtn" @click="getValidate" :disabled="!isnotsend">
					<p v-if="isnotsend">获取验证码</p>
					<van-count-down v-else :time="time" format="sss"/>
				</van-button>
			</div>
		</div>

		<img class="regbtn" :src="canToReg?regbtn:unregbtn" alt="" @click="reg">

		<div class="more">
			<p>注册<strong>/</strong>登录表示同意<span @click="Jumptoagre">用户协议</span><strong>|</strong><span style="margin-left: 0;" @click="Jumptodoc">隐私条款</span></p>
		</div>
	</div>
</template>
<script>
import { _checkValidate,_sendvalidatecode } from '../../service/user.js'
import {_getWxLogin,_WeChatLogin} from '../../service/wxService.js'
export default {
    data(){
		return{
			phone:require('../../assets/img/phone.png'),
			board:require('../../assets/img/board.png'),

			canToReg:false,
			regbtn:require('../../assets/img/regActX3.png'),
			unregbtn:require('../../assets/img/regUnActX3.png'),

			isnotsend:true,
			time:60000,

			phoneNum:"",
			validata:"",

		}
	},
	mounted(){
		if(localStorage.getItem("WxUserInfo")==null ||localStorage.getItem("WxUserInfo")==undefined){
			this.$toast("无微信授权")
			return
		}
	},
	activated(){
		this.phoneNum=""
		this.validata=""
	},
	watch:{
		phoneNum (newValue, oldValue) {
			if (newValue > oldValue) {
				if (newValue.length === 4 || newValue.length === 9 ) {
					var pre = newValue.substring(0, newValue.length - 1)
					var last = newValue.substr(newValue.length - 1, 1)
					this.phoneNum = pre + ' ' + last
				} else {
					this.phoneNum = newValue
				}
			} else {
				if (newValue.length === 9 || newValue.length === 4) {
					this.phoneNum = this.phoneNum.trim()
				} else {
					this.phoneNum = newValue
				}
			}
		},
		validata(newValue, oldValue){
			this.canToReg=false
			if(this.validatephone(this.phoneNum)&&this.validataMsg(this.validata)){
				this.canToReg=true
			}
		}
	},
	methods:{
		getphone(){
			this.$refs.phonen.focus()
		},
		getpwd(){
			this.$refs.pwd.focus()
		},
		Jumptoagre(){
			this.$router.push({path:"/reg/UserAgreement",query:{id:2}})
		},
		Jumptodoc(){
			this.$router.push({path:"/reg/UserAgreement",query:{id:1}})
		},
		back(){
			this.$router.push("/login")
		},
		getValidate(){
			let _this=this
			if(this.validatephone(this.phoneNum)){
				let nub=_this.phoneNum.replace(/\s*/g,"").replace("+86","")
				this.isnotsend=false
				setTimeout(()=>{
					_this.isnotsend=true
				},60000)
				_sendvalidatecode({mobile:nub}).then(res=>{
					_this.$toast(res.message)
				})
			}else{
				this.$toast.fail('请输入正确的手机号');
			}
		},
		validataMsg(val){
			if(!(/^[0-9]{4}$/.test(val))){
				return false
			}
			return true
		},
		validatephone(val){
			let nub=val.replace(/\s*/g,"").replace("+86","")
			if(!(/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(nub))){ 
				return false; 
			} 
			return true
		},
		reg(){
			if(!this.canToReg){
				return
			}
			let _this=this
			if(this.validatephone(this.phoneNum)){
				let nub=_this.phoneNum.replace(/\s*/g,"").replace("+86","")
				_checkValidate({
					mobile:nub,
					mobile_code:_this.validata
				}).then(res=>{
					console.log("_checkValidate",res)
					_this.$toast(res.message)
					if(res.errcode==1){
						_this.$router.push({path:'/reg/confirm',query: {nub}})
					}
				})
			}
		}
	}
}
</script>
<style scoped>
    .main{
		height: 100%;
		width: 100%;
		padding-top: 100px;
	}
	.main>h3{
		font-family: "PingFang SC","Microsoft YaHei";
		font-weight: 1000;
		font-size: 27px;
		margin: 0 0 0 67px;
		color: #000;
		font-weight: blod;
	}
	.phones{
		width: 100%;
		height: 90px;
		margin-top: 38px;
		padding-top: 58px;
	}
	.pwd{
		width: 100%;
		height: 62px;
		padding-top: 24px;

	}
	.phone-icon{
		width: 12px;
		margin: 0 16px 5px 74px;
		display: inline-block;
		line-height: 32px;
	}
	.phone-icon-2{
		width: 14px;
		margin: 0 15px 5px 73px;
		display: inline-block;
		line-height: 32px;
	}
	input{
		background:none;  
		outline:none;  
		border:none;
		height: 30px;
		line-height: 30px;
		font-family: "DINPro-Bold";
		font-size: 16px;
		color: #000;
		caret-color:#000;
		font-weight: 300;
		letter-spacing: .05rem;
	}
	.backbtn{
		width: 10px;
		position: absolute;
		top: 30px;
		left: 18px;
	}
	.phone-input{
		display: inline-block;
		height: 34px;
		width: 205px;
		border-bottom: 1px solid #ccc;
	}
	.phone-dep{
		width: 70%;
	}
	.phone-Prefix{
		display: inline-block;
		font-family: "DINPro-Bold";
		font-size: 16px;
		margin-right: 4px;
		letter-spacing: .05rem;
	}
	.input-span-color-c{
		color: #ccc;
	}
	.input-span-color-0{
		color: #000;
	}
	::-webkit-input-placeholder { /* WebKit browsers */
		color: rgb(204, 204, 204);
		font-size: 16px;
		font-family: "DINPro-Bold";
		line-height: 33px;
	}

	::-moz-placeholder { /* Mozilla Firefox 19+ */
		color: rgb(204, 204, 204);
		font-size: 16px;
		font-family: "DINPro-Bold";
		line-height: 33px;
	}

	:-ms-input-placeholder { /* Internet Explorer 10+ */
		color: rgb(204, 204, 204);
		font-size: 16px;
		font-family: "DINPro-Bold";
		line-height: 33px;
	}  


	.regbtn{
		display: block;
		width: 254px;
		margin: 40px auto 30px auto;
	}
	.more{
		width: 100%;
		font-family: "PingFang SC","Microsoft YaHei";
		font-weight: bold;
		font-size: 13px;
		color: #ccc;
	}
	.more p{
		text-align: center;
	}
	.more p span{
		display: inline-block;
		color: #333;
		margin-left: 4px;
	}
	.more p strong{
		display: inline-block;
		width: 8px;
		text-align: center;

	}

	.valibtn{
		display: inline-block;
		width: 80px;
		height: 30px;
		line-height: 30px;
		margin-bottom: 10px;
		background-color: #f5f5f5;
		float: right;
		color: #666;
		font-size: 10px;
		font-family: "PingFang SC","Microsoft YaHei";
	}
</style>